<template>
  <el-row>
    <el-form :model="form"
             ref="form"
             :rules="rules"
             label-width="100px">
      <el-col :span="24"
              class="searchNav">
        <el-form-item label="邀请码加入"
                      class="searchForm"
                      prop="invite_code">
          <!-- <el-tooltip content="失去焦点时获取该邀请码的单位名称"
                      placement="top"
                      effect="light">
            <el-input v-model="form.invite_code"
                      @blur="ongetCompanyName"
                      placeholder="请输入邀请码"></el-input>
          </el-tooltip> -->
          <el-input v-model="form.invite_code"
                    placeholder="请输入邀请码"></el-input>
        </el-form-item>
        <div class="searchBtn">
          <el-button type="primary"
                     @click="ongetCompanyName">查看</el-button>
        </div>
      </el-col>
      <el-col :span="24"
              v-if="company_name!=''">
        <el-form-item label="单位名称：">
          {{company_name}}
        </el-form-item>
      </el-col>
      <el-col :span="24"
              class="bottom-box">
        <el-button @click="onCancel">取消</el-button>
        <el-button :type="company_name==''?'info':'primary'"
                   :disabled="company_name==''?true:false"
                   @click="onSubmit('form')">下一步</el-button>
      </el-col>
    </el-form>
    <el-dialog title="加入岗位"
               :visible.sync="postDialogVisible"
               width="40%"
               :before-close="handleClose"
               append-to-body>
      <el-row>
        <el-form :model="postform"
                 ref="postform"
                 :rules="rules"
                 label-width="100px">
          <el-col :span="24"
                  class="searchNav">
            <!-- 选择部门 -->
            <el-form-item label="选择组织"
                          class="searchForm"
                          prop="selSection">
              <el-cascader placeholder="请选择组织"
                           @change="changeSection"
                           v-model="postform.selSection"
                           class="choose-location-cascader"
                           :options="sectionArr"
                           :props="propParams">
              </el-cascader>
              <!-- <el-select v-model="postform.selSection"
                         @change="changeSection"
                         multiple
                         class="postSel"
                         placeholder="请选择">
                <el-option v-for="item in sectionArr"
                           :key="item.dept_id"
                           :label="item.dept_name"
                           :value="item.dept_id">
                </el-option>
              </el-select> -->
            </el-form-item>
            <div class="searchBtn">
              <el-button type="primary"
                         @click="setupProject">创建项目部</el-button>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择岗位"
                          class="searchForm"
                          prop="selPost">
              <el-select v-model="postform.selPost"
                         :disabled="postform.selSection.length>0 ? false :true"
                         style="width: 76%;"
                         class="postSel"
                         placeholder="请选择">
                <el-option v-for="item in postArr"
                           :key="item.job_id"
                           :label="item.job_name"
                           :value="item.job_id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24"
                  class="bottom-box">
            <el-button @click="postCancel">取消</el-button>
            <el-button type="primary"
                       @click="submitPost">提交</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
    <el-dialog title="创建项目部"
               :visible.sync="projectDialog"
               width="40%"
               append-to-body>
      <el-row>
        <el-form :model="projectform"
                 ref="projectform"
                 :rules="rules"
                 label-width="100px">
          <el-col :span="24"
                  class="searchNav">
            <el-form-item label="项目部名称"
                          class="searchForm"
                          prop="projectName">
              <el-input v-model="projectform.projectName"
                        placeholder="请输入项目部名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24"
                  class="bottom-box">
            <el-button @click="projectCancel">取消</el-button>
            <el-button type="primary"
                       @click="create">提交</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </el-row>
</template>

<script>
import { MyCompanyApi } from '@/services/WorkBench';
import { standardCodeApi } from '@/services/StandardCode'
export default {
  props: {
    childValueToParent: Function,
    isReset: Number
  },
  data () {
    return {
      propParams: {
        multiple: true,
        checkStrictly: true,
        value: 'dept_id',                 //匹配响应数据中的id
        label: 'dept_name',
        children: 'children_list',
      },
      code: "",
      sectionArr: [], //部门
      postArr: [], //岗位
      projectDialog: false,  //创建项目部弹窗
      postDialogVisible: false, //加入岗位弹窗
      company_name: '',
      form: {
        invite_code: ''
      },
      postform: {
        selSection: [], //选择部门
        selPost: '', //选择岗位
      },
      projectform: {
        projectName: '', //项目部名称

      },
      rules: {
        invite_code: [
          { required: true, message: '邀请码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取标准码
    // getStardandCode () {
    //   standardCodeApi.getStandardCodeData({
    //     data: {
    //       code_type: 'deptType'
    //     }
    //   }).then((res) => {
    //     this.sectionArr = res.data.list
    //   }).catch((error) => {
    //     console.log(error)
    //   })
    // },
    getCurrentCascaderIds (val) {//获取当前级联的主键值
      let newArr = [];
      if (val.length > 0) {
        for (var i of val) {
          newArr.push(i[i.length - 1])
        }
      };
      return newArr;
    },
    //部门选中值
    changeSection (val) {
      let arr = this.getCurrentCascaderIds(val);//获取当前级联的主键值
      let ids = arr.join(',')
      if (val.length > 0) {
        MyCompanyApi.getPost({
          params: {
            dept_id: ids,
            is_page: 0
          }
        }).then(res => {
          if (res.code === 0) {
            this.postArr = res.data.list
          }
        }), err => {
          console.log(err);
        }
      }
    },
    //点击创建项目部
    setupProject () {
      this.projectDialog = true
    },
    //邀请码失去焦点时触发的事件（获取单位名称）
    ongetCompanyName () {
      if (this.form.invite_code == "") {
        this.company_name = ''
      } else {
        this.getInviteCodeComInfo()//根据邀请码获取单位信息
      }
    },
    //下一步
    onSubmit (data) {
      this.postDialogVisible = true
      this.$emit('joinDialog', false)
      this.$refs[data].validate((valid) => {
        if (valid) {
          this.getPost()
        } else {
          console.log('error')
        }
      })
    },
    //获取部门
    getPost () {
      MyCompanyApi.getUnit({
        data: this.form
      }).then((res) => {
        if (res.code == 0) {
          // this.$store.state.hasTheUnitIncreaStatus = 1;
          // this.childValueToParent();
          // this.$message.success('操作成功!鼠标放在您已创建的单位上可以对该单位进行相应的操作')
          this.sectionArr = res.data.list;
          this.code = this.form.invite_code;
          console.log('数据sectionArr=', this.sectionArr)
          // this.postDialogVisible = true
        } else {
          // this.$store.state.hasTheUnitIncreaStatus = 0;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //创建项目部
    create () {
      MyCompanyApi.createProject({
        data: {
          invite_code: this.code,
          dept_name: this.projectform.projectName
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('创建成功')
          this.projectform.projectName = ''
          this.projectDialog = false
          this.getPost()
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //取消
    onCancel () {
      this.company_name = '';
      this.$refs.form.resetFields();
      this.form = this.$options.data().form;//重置
      this.childValueToParent('重置')
    },
    //加入岗位提交
    submitPost () {
      let selSection = this.postform.selSection;
      let arr = this.getCurrentCascaderIds(selSection);//获取当前级联的主键值
      MyCompanyApi.createPost({
        data: {
          invite_code: this.code,
          dept_id: arr.join(','),
          job_id: this.postform.selPost
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$store.state.hasTheUnitIncreaStatus = 1;  //原来提交的内容放到加入岗位的提交
          this.childValueToParent();
          this.$message.success('操作成功!鼠标放在您已创建的单位上可以对该单位进行相应的操作')
          this.postDialogVisible = false
          this.$refs.postform.resetFields();
        } else {
          this.$store.state.hasTheUnitIncreaStatus = 0;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //岗位取消
    postCancel () {
      this.postDialogVisible = false
      this.$refs.postform.resetFields();
    },
    //点关闭的时候清空
    handleClose () {
      this.postDialogVisible = false
      this.$refs.postform.resetFields();
    },
    //创建项目部取消
    projectCancel () {
      this.projectDialog = false
      this.$refs.projectform.resetFields();
    },
    getInviteCodeComInfo () {//根据邀请码获取单位信息
      this.company_name = ''
      MyCompanyApi.getInviteCodeComInfo({
        params: {
          invite_code: this.form.invite_code
        }
      }).then((res) => {
        if (res.code == 0) {
          this.company_name = res.data.company_name;
        }
        // console.log('根据邀请码获取单位信息', res, 'company_name=', this.company_name)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  watch: {
    isReset (n, o) {
      if (n == 0) {
        this.onCancel();//重置
      }
    },
    // form: {
    //   handler (n, o) {
    //     if (n.invite_code == "") {
    //       this.company_name = ''
    //     } else {
    //       this.getInviteCodeComInfo()//根据邀请码获取单位信息
    //     }
    //     console.log('form深度监听n=', n)
    //   },
    //   deep: true
    // }
  },
  created () {
    if (this.form.invite_code == "") {
      this.company_name = ''
    }
    if (this.isReset == 0) {
      this.onCancel();//重置
    }
    // this.getStardandCode()
  }
}
</script>

<style lang="scss" scoped>
.bottom-box {
  text-align: center;
}
.searchNav {
  display: flex;
  .searchForm {
    width: 80%;
  }
  .searchBtn {
    margin: 0 10px;
  }
}
.postSel {
  display: block !important;
}
.comp-style {
  padding-left: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>